<template>
	<view class="container l-box-pa-l wh100" @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend">
		<head-nav :left="false" :bgColor="bgColor" inputWidth="100%" :centre="true" :title="title"></head-nav>
		<view class="box" :style="{'height': boxHeight+'px'}">
			<view class="content"
				:style="[Style,{height: boxHeight+'px',columns: `calc(${windowWidth - 2*col_spac}px) ${pageNum}`,'margin': `0 ${col_spac}px`}]">
				一念永恒
				作者：耳根
				第一章 他叫白小纯
				帽儿山，位于东林山脉中，山下有一个村子，民风淳朴，以耕田为生，与世隔绝。
				清晨，村庄的大门前，整个村子里的乡亲，正为一个十五六岁少年送别，这少年瘦弱，但却白白净净，看起来很是乖巧，衣着尽管是寻常的青衫，可却洗的泛白，穿在这少年的身上，与他目中的纯净搭配在一起，透出一股子灵动。
				他叫白小纯。
				“父老乡亲们，我要去修仙了，可我舍不得你们啊。”少年满脸不舍，原本就乖巧的样子，此刻看起来更为纯朴。
				四周的乡亲，面面相觑，顿时摆出难舍之色。
				“小纯，你爹娘走的早，你是个好孩子难道你不想长生了么，成为仙人就可以长生，能活的很久很久，走吧，雏鹰长大，总有飞出去的那一天。”人群内走出一个头发花白的老者，说道好孩子三个字时，他顿了一下。
				“在外面遇到任何事情，都要坚持下去，走出村子，就不要回来，因为你的路在前方”老人神色慈祥，拍了拍少年的肩膀。
				“长生”白小纯身体一震，目中慢慢坚定起来，在老者以及四周乡亲鼓励的目光下，他重重的点了点头，深深的看了一眼四周的乡亲，转身迈着大步，渐渐走出了村子。
				眼看少年的身影远去，村中的众人，一个个都激动起来，目中的难舍刹那就被喜悦代替，那之前满脸慈祥的老者，此刻也在颤抖，眼中流下泪水。
				“苍天有眼，这白鼠狼，他终于终于走了，是谁告诉他在附近看到仙人的，你为村子立下了大功”
				“这白鼠狼终于肯离开了，可怜我家的几只鸡，就因为这白鼠狼怕鸡打鸣，不知用了什么方法，唆使一群孩子吃鸡肉，把全村的鸡都给吃的干干净净”
				“今天过年了”欢呼之声，立刻在这不大的村子里，沸腾而起，甚至有人拿出了锣鼓，高兴的敲打起来。
				村子外，白小纯还没等走远，他就听到了身后村子内，传出了敲锣打鼓的声音，还夹着欢呼。
				白小纯脚步一顿，神色有些古怪，干咳一声，伴随着耳边传来的锣鼓，白小纯顺着山路，走上了帽儿山。
				这帽儿山虽不高，却灌木杂多，虽是清晨，可看起来也是黑压压一片，很是安静。
				“听二狗说，他前几天在这里被一头野猪追赶时，看到天上有仙人飞过”白小纯走在山路上，心脏怦怦跳动时，忽然一旁的灌林中传来阵阵哗哗声，似野猪一样，这声音来的突然，让本就紧张的白小纯，顿时背后发凉。
				“谁，谁在那里”白小纯右手快速从行囊中拿出四把斧头，六把柴刀，还觉得不放心，又从怀里取出了一小根黑色的香，死死的抓住。
				“别出来，千万别出来，我有斧头，有柴刀，手里的香还可以召唤天雷，能引仙人降临，你敢出来，就霹死你”白小纯哆嗦的大喊，连滚带爬的夹着那些武器，赶紧顺着山路跑去，沿途叮当乱响，斧头柴刀掉了一地。
				或许是真的被他给吓住了，很快的哗哗声就消失，没有什么野兽跑出来，白小纯面色苍白，擦了擦冷汗，有心放弃继续上山，可一想到手中这根香是他爹娘去世前留给他的，据说是祖上曾偶然的救下一个落魄的仙人，那仙人离去时留下这根香作为报答，曾言会收下白家血脉一人为弟子，只要点燃，仙人就会到来。
				可至今为止，这根香他点过十多次，始终不见仙人到来，让白小纯开始怀疑仙人是不是真的会来，这一次之所以下定决心，一方面是香所剩不多，另一方面是他听村子里人说，头几天在这看到有仙人从天上飞过。
				所以他这才到来，想着距离仙人近一些，或许仙人就察觉到了也说不定。
				踌躇一番，白小纯咬牙继续，好在此山不高，不久他气喘吁吁的到了山顶，站在那里，他遥望山下的村庄，神色颇为感慨，又低头看着手中的只有指甲盖大小的黑香，此香似乎被燃烧了好多次，所剩不多。
				“三年了，爹娘保佑我，这次一定要成功”白小纯深吸口气，小心的将香点燃，立刻四周狂风顿起，天空更是眨眼间乌云密布，一道道闪电划过，还有震耳欲聋的雷鸣在白小纯耳边直接炸开。
				声音之大，气势之强，让白小纯身体哆嗦，有种随时会被雷霹死的感觉，下意识的就想要吐口唾沫将那根香灭掉，但却挣扎忍住。
				“三年了，我点这根香点了十二次，这是第十三次，这次一定要忍住，小纯不怕，应该不会被劈死”白小纯想起了这三年的经历，不算这次，点了十二次，每次都是这样的雷鸣闪电，仙人也没有到来，吓的本就怕死的他每次都吐口唾沫将其熄灭，说来也怪，这根香看似不凡，可实际上一样是浇水就灭。
				在白小纯这里心惊肉跳，艰难的于那雷声中等待时，距离这里不远处的天空上，有一道长虹正急速的呼啸而来。
				长虹内是一个中年男子，这男子衣着华丽，仙风道骨，可偏偏风尘仆仆，甚至仔细去看，可以看到他神色内深深的疲惫。
				“我倒要看看，到底是个什么样的人，竟然点根香点了三年”
				一想到自己这三年的经历，中年男子就气恼，三年前他察觉有人点燃自己还是凝气时送出的香药，想起了当年在凡俗中的一段人情。
				一念永恒
				作者：耳根
				第一章 他叫白小纯
				帽儿山，位于东林山脉中，山下有一个村子，民风淳朴，以耕田为生，与世隔绝。
				清晨，村庄的大门前，整个村子里的乡亲，正为一个十五六岁少年送别，这少年瘦弱，但却白白净净，看起来很是乖巧，衣着尽管是寻常的青衫，可却洗的泛白，穿在这少年的身上，与他目中的纯净搭配在一起，透出一股子灵动。
				他叫白小纯。
				“父老乡亲们，我要去修仙了，可我舍不得你们啊。”少年满脸不舍，原本就乖巧的样子，此刻看起来更为纯朴。
				四周的乡亲，面面相觑，顿时摆出难舍之色。
				“小纯，你爹娘走的早，你是个好孩子难道你不想长生了么，成为仙人就可以长生，能活的很久很久，走吧，雏鹰长大，总有飞出去的那一天。”人群内走出一个头发花白的老者，说道好孩子三个字时，他顿了一下。
				“在外面遇到任何事情，都要坚持下去，走出村子，就不要回来，因为你的路在前方”老人神色慈祥，拍了拍少年的肩膀。
				“长生”白小纯身体一震，目中慢慢坚定起来，在老者以及四周乡亲鼓励的目光下，他重重的点了点头，深深的看了一眼四周的乡亲，转身迈着大步，渐渐走出了村子。
				眼看少年的身影远去，村中的众人，一个个都激动起来，目中的难舍刹那就被喜悦代替，那之前满脸慈祥的老者，此刻也在颤抖，眼中流下泪水。
				“苍天有眼，这白鼠狼，他终于终于走了，是谁告诉他在附近看到仙人的，你为村子立下了大功”
				“这白鼠狼终于肯离开了，可怜我家的几只鸡，就因为这白鼠狼怕鸡打鸣，不知用了什么方法，唆使一群孩子吃鸡肉，把全村的鸡都给吃的干干净净”
				“今天过年了”欢呼之声，立刻在这不大的村子里，沸腾而起，甚至有人拿出了锣鼓，高兴的敲打起来。
				村子外，白小纯还没等走远，他就听到了身后村子内，传出了敲锣打鼓的声音，还夹着欢呼。
				白小纯脚步一顿，神色有些古怪，干咳一声，伴随着耳边传来的锣鼓，白小纯顺着山路，走上了帽儿山。
				这帽儿山虽不高，却灌木杂多，虽是清晨，可看起来也是黑压压一片，很是安静。
				“听二狗说，他前几天在这里被一头野猪追赶时，看到天上有仙人飞过”白小纯走在山路上，心脏怦怦跳动时，忽然一旁的灌林中传来阵阵哗哗声，似野猪一样，这声音来的突然，让本就紧张的白小纯，顿时背后发凉。
				“谁，谁在那里”白小纯右手快速从行囊中拿出四把斧头，六把柴刀，还觉得不放心，又从怀里取出了一小根黑色的香，死死的抓住。
				“别出来，千万别出来，我有斧头，有柴刀，手里的香还可以召唤天雷，能引仙人降临，你敢出来，就霹死你”白小纯哆嗦的大喊，连滚带爬的夹着那些武器，赶紧顺着山路跑去，沿途叮当乱响，斧头柴刀掉了一地。
				或许是真的被他给吓住了，很快的哗哗声就消失，没有什么野兽跑出来，白小纯面色苍白，擦了擦冷汗，有心放弃继续上山，可一想到手中这根香是他爹娘去世前留给他的，据说是祖上曾偶然的救下一个落魄的仙人，那仙人离去时留下这根香作为报答，曾言会收下白家血脉一人为弟子，只要点燃，仙人就会到来。
				可至今为止，这根香他点过十多次，始终不见仙人到来，让白小纯开始怀疑仙人是不是真的会来，这一次之所以下定决心，一方面是香所剩不多，另一方面是他听村子里人说，头几天在这看到有仙人从天上飞过。
				所以他这才到来，想着距离仙人近一些，或许仙人就察觉到了也说不定。
				踌躇一番，白小纯咬牙继续，好在此山不高，不久他气喘吁吁的到了山顶，站在那里，他遥望山下的村庄，神色颇为感慨，又低头看着手中的只有指甲盖大小的黑香，此香似乎被燃烧了好多次，所剩不多。
				“三年了，爹娘保佑我，这次一定要成功”白小纯深吸口气，小心的将香点燃，立刻四周狂风顿起，天空更是眨眼间乌云密布，一道道闪电划过，还有震耳欲聋的雷鸣在白小纯耳边直接炸开。
				声音之大，气势之强，让白小纯身体哆嗦，有种随时会被雷霹死的感觉，下意识的就想要吐口唾沫将那根香灭掉，但却挣扎忍住。
				“三年了，我点这根香点了十二次，这是第十三次，这次一定要忍住，小纯不怕，应该不会被劈死”白小纯想起了这三年的经历，不算这次，点了十二次，每次都是这样的雷鸣闪电，仙人也没有到来，吓的本就怕死的他每次都吐口唾沫将其熄灭，说来也怪，这根香看似不凡，可实际上一样是浇水就灭。
				在白小纯这里心惊肉跳，艰难的于那雷声中等待时，距离这里不远处的天空上，有一道长虹正急速的呼啸而来。
				长虹内是一个中年男子，这男子衣着华丽，仙风道骨，可偏偏风尘仆仆，甚至仔细去看，可以看到他神色内深深的疲惫。
				“我倒要看看，到底是个什么样的人，竟然点根香点了三年”
				一想到自己这三年的经历，中年男子就气恼，三年前他察觉有人点燃自己还是凝气时送出的香药，想起了当年在凡俗中的一段人情。
			</view>
		</view>
		
		<menu-show :paddingTop="statusBarHeight" :height="titleHeight" :shift="shift"></menu-show>
		
	</view>


</template>

<script>
	import headNav from '@/components/head/head.vue';
	import menuShow from '@/components/menu/menu.vue'
	var bgColor = '#fff9eb'; //背景颜色
	var line_height = 50;//内容的行高
	var font_size = 20;//内容的字体大小
	var color = '#333'; //内容的颜色
	var col_spac = 16; //内容的间距
	export default {
		data() {
			return {
				currentPage: 0, //当前页
				bgColor: bgColor,
				title: '一念永恒',
				Style: {
					"lineHeight": line_height + 'px',
					"fontSize": font_size + 'px',
					"color": color,
					"transform": null,
					"column-gap": '16px'
				},
				col_spac: col_spac,
				windowWidth:null,//屏幕可用宽度
				windowHeight:null,//屏幕可用高度
				ctHeight: null, //内容的高度
				boxHeight: null, //box容器的高度
				titleHeight: null, 
				shift: false,
				naviBarHeight: null, //导航栏搞度
				statusBarHeight: null, // 状态栏高度
				touchStartPositionX: null, //开始触摸的x轴位置
				touchStartPositionY: null, //开始触摸的Y轴位置
				touchMovePositionX: null, //触摸移动的x轴位置
				touchMovePositionX: null, //触摸移动的y轴位置
				move: false,//是否触发移动
				range: 0, //滑动的距离
			}
		},
		components:{headNav,menuShow},
		computed: {
			pageNum() {
				return Math.ceil(this.ctHeight / this.boxHeight)
			}
		},
		watch:{},
		methods: {
			getSystemInfo() {
				let systemInfo = uni.getStorageSync('systemInfo');
				//总高度
				this.shift = this.titleHeight = systemInfo.titleHeight;
				//导航栏搞度
				this.naviBarHeight = systemInfo.naviBarHeight;
				// 状态栏高度
				this.statusBarHeight = systemInfo.statusBarHeight
				this.windowHeight = systemInfo.windowHeight;
				this.windowWidth = systemInfo.windowWidth
				let info = uni.createSelectorQuery().select(".content");
				info.boundingClientRect((data) => { //data - 各种参数
					// console.log('ctHeight ==>', data)
					let ctHeight = Math.floor(data.height / line_height) * line_height;
					this.ctHeight = this.$set(this, 'ctHeight', ctHeight);
					let boxHeight = Math.floor((systemInfo.windowHeight - this.titleHeight) / line_height) * line_height;
					this.boxHeight = this.$set(this, 'boxHeight', boxHeight);
				}).exec()
			},
			touchstart(e) {
				let touches = e.touches[0]
				this.touchStartPositionX = touches.clientX;
				this.touchStartPositionY = touches.clientY
			},
			touchmove(e) {
				let touches = e.touches[0]
				this.touchMovePositionX = touches.clientX;
				this.touchMovePositionY = touches.clientY;
				this.move = true;
				let range = Math.trunc(touches.clientX - this.touchStartPositionX)*2
				
				this.Style.transform = `translateX(-${(this.windowWidth - col_spac) * this.currentPage - range}px)`
			},
			touchend(e) {
				if(!this.move) {
					let x = this.touchStartPositionX;
					let y = this.touchStartPositionY;
					let width = Math.trunc(this.windowWidth / 2);
					let height = Math.trunc(this.windowHeight / 2);
					if ((x > Math.trunc(width - 50) && x < Math.trunc(width + 50)) && (y > Math.trunc(height - 200) && y < Math.trunc(height + 200))) {
						// this.$Function.Toast('选中了')
						this.shift = !this.shift
						return
					}
				}
				let direction = this.move?Math.fround(this.touchMovePositionX - this.touchStartPositionX):0
				if(direction<0&&this.currentPage < this.pageNum - 1) {
					this.currentPage++
				}else if(direction>0&&this.currentPage >= 1) {
					this.currentPage--
				}else{
					if(this.touchStartPositionX > Math.trunc(this.windowWidth/2)) {
						if(this.currentPage < this.pageNum - 1) this.currentPage++
					}else{
						if(this.currentPage >= 1) this.currentPage--
					}
				}
				this.Style.transform = `translateX(-${(this.windowWidth - col_spac + 1) * this.currentPage}px)`;
				this.move = false;
			},
			callOutMenu() {
				
			}

		},
		onLoad() {},
		onReady() {
			this.getSystemInfo()

		}
	}
</script>

<style lang="scss" scoped>
	.container {
		background-color: #fff9eb;

		.box {
			height: 90vh;
			overflow: hidden;

			.content {
				transition: 0.4s;
			}
		}
	}
</style>
